<template>
  <div class="station-detail" v-if="station">
    <!-- 头部 -->
    <div class="detail-header">
      <button class="back-btn" @click="$emit('close')">←</button>
      <h2 class="station-name">{{ station.stationName }}</h2>
    </div>

    <!-- 基础信息 -->
    <div class="info-section">
      <div class="info-item">
        <span class="label">地址</span>
        <span class="value">{{ station.address }}</span>
      </div>
      <div class="info-item">
        <span class="label">距离</span>
        <span class="value">{{ formatDistance(station.distance) }}</span>
      </div>
      <div class="info-item">
        <span class="label">营业时间</span>
        <span class="value">{{ station.openTime || '24小时营业' }}</span>
      </div>
      <div class="info-item">
        <span class="label">联系电话</span>
        <span class="value">{{ station.stationTel || '暂无' }}</span>
      </div>
      <div class="info-item">
        <span class="label">停车费用</span>
        <span class="value">{{ station.parkFee || '免费停车' }}</span>
      </div>
    </div>

    <!-- 充电功率信息 -->
    <div class="power-section">
      <h3>充电功率</h3>
      <div class="power-info">
        <div class="power-item">
          <span class="label">快充功率</span>
          <span class="value">
            <span v-if="getMaxFastPower() > 900">{{ (getMaxFastPower() / 1000).toFixed(1) }}kW</span>
            <span v-else>{{ getMaxFastPower() }}kW</span>
          </span>
        </div>
        <div class="power-item">
          <span class="label">慢充功率</span>
          <span class="value">7kW</span>
        </div>
      </div>
    </div>

    <!-- 充电桩状态 -->
    <div class="charger-section">
      <h3>充电桩状态</h3>
      <div class="charger-grid">
        <div class="charger-item">
          <div class="charger-type">快充</div>
          <div class="charger-status">
            <span class="available">{{ station.quickAvailableNum }}</span>
            <span class="total">/{{ station.quickChargeNum }}</span>
          </div>
          <div class="charger-label">可用/总数</div>
        </div>
        <div class="charger-item">
          <div class="charger-type">慢充</div>
          <div class="charger-status">
            <span class="available">{{ station.slowAvailableNum }}</span>
            <span class="total">/{{ station.slowChargeNum }}</span>
          </div>
          <div class="charger-label">可用/总数</div>
        </div>
      </div>
      
      <!-- 单个充电桩状态列表 -->
      <div class="individual-chargers">
        <h4>充电桩详情</h4>
        <div class="charger-list">
          <div 
            v-for="(charger, index) in getIndividualChargers()" 
            :key="index"
            class="individual-charger-item"
            :class="`status-${charger.status}`"
          >
            <div class="charger-id">
              <span class="charger-number">充电桩 {{ index + 1 }}</span>
              <span class="connector-type">{{ charger.connectorType }}</span>
            </div>
            <div class="charger-details">
              <span class="power">{{ charger.power }}</span>
              <span class="status-badge" :class="`badge-${charger.status}`">
                {{ getStatusText(charger.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 配套设施 -->
    <div class="facilities-section">
      <h3>配套设施</h3>
      <div class="facilities-list">
        <div v-for="facility in getFacilities()" :key="facility" class="facility-item">
          <span class="facility-icon">{{ getFacilityIcon(facility) }}</span>
          <span class="facility-name">{{ facility }}</span>
        </div>
      </div>
    </div>

    <!-- 价格信息 -->
    <div class="price-section">
      <h3>价格信息</h3>
      <div class="current-price">
        <span class="label">当前价格</span>
        <span class="value">¥{{ station.totalCostPrice }}/度</span>
      </div>
      <div class="price-breakdown">
        <div class="price-item">
          <span>电费</span>
          <span>¥{{ station.electricityPrice }}/度</span>
        </div>
        <div class="price-item">
          <span>服务费</span>
          <span>¥{{ station.servicePrice }}/度</span>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-section">
      <button class="nav-btn" @click="$emit('navigate', station)">导航前往</button>
      <button 
        class="charge-btn" 
        @click="$emit('startCharge', station)"
        :disabled="!canStartCharging"
      >
        {{ canStartCharging ? '开始充电' : '暂无可用桩' }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStationsStore } from '@/stores/station'
import type { Station } from '@/types/station'

const props = defineProps<{
  station: Station
}>()

const emit = defineEmits<{
  close: []
  navigate: [station: Station]
  startCharge: [station: Station]
}>()

const store = useStationsStore()

// 计算属性
const canStartCharging = computed(() => {
  return store.getAvailableCount(props.station) > 0
})

// 格式化距离
const formatDistance = (distance: number) => {
  if (distance < 1) {
    return `${Math.round(distance * 1000)}m`
  }
  return `${distance.toFixed(1)}km`
}

// 获取最大快充功率
const getMaxFastPower = () => {
  // 这里可以从真实数据中获取，如果没有则返回默认值
  const powerValues = [120, 960, 240]
  return Math.max(...powerValues)
}

// 获取配套设施列表
const getFacilities = () => {
  // 模拟返回一些常见的配套设施
  return ['停车场', '洗手间', '便利店', '休息室', 'WiFi']
}

// 获取设施图标
const getFacilityIcon = (facility: string) => {
  const iconMap: Record<string, string> = {
    '停车场': '🅿️',
    '洗手间': '🚻',
    '便利店': '🏪',
    '休息室': '🛋️',
    'WiFi': '📶'
  }
  return iconMap[facility] || '📍'
}

// 单个充电桩信息接口
interface ChargerInfo {
  status: 'available' | 'busy' | 'maintenance' | 'offline'
  power: string
  connectorType: string
}

// 获取单个充电桩状态列表
const getIndividualChargers = (): ChargerInfo[] => {
  // 模拟生成充电桩列表
  const totalQuickChargers = props.station.quickChargeNum || 5
  const totalSlowChargers = props.station.slowChargeNum || 2
  const quickAvailable = props.station.quickAvailableNum || 3
  const slowAvailable = props.station.slowAvailableNum || 1
  
  const chargers: ChargerInfo[] = []
  
  // 添加快充桩
  for (let i = 0; i < totalQuickChargers; i++) {
    chargers.push({
      status: i < quickAvailable ? 'available' : 'busy',
      power: '120kW',
      connectorType: '国标直流'
    })
  }
  
  // 添加慢充桩
  for (let i = 0; i < totalSlowChargers; i++) {
    chargers.push({
      status: i < slowAvailable ? 'available' : 'busy',
      power: '7kW',
      connectorType: '国标交流'
    })
  }
  
  return chargers
}

// 获取状态文本
const getStatusText = (status: string): string => {
  const statusMap: Record<string, string> = {
    'available': '空闲',
    'busy': '使用中',
    'maintenance': '维护中',
    'offline': '离线'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped>
.station-detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 1001;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, #1890ff, #096dd9);
  color: white;
  position: sticky;
  top: 0;
  z-index: 1;
}

.back-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  margin-right: 12px;
  cursor: pointer;
}

.station-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.info-section {
  padding: 16px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

/* 充电功率信息样式 */
.power-section {
  padding: 16px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.power-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
}

.power-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.power-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f0f8ff;
  border-radius: 6px;
  border: 1px solid #91d5ff;
}

.power-item .label {
  font-size: 14px;
  color: #333;
}

.power-item .value {
  font-size: 18px;
  font-weight: 600;
  color: #1890ff;
}

/* 配套设施样式 */
.facilities-section {
  padding: 16px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.facilities-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
}

.facilities-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.facility-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: #f6ffed;
  border-radius: 6px;
  border: 1px solid #b7eb8f;
  text-align: center;
  justify-content: center;
}

.facility-icon {
  font-size: 16px;
}

.facility-name {
  font-size: 13px;
  color: #52c41a;
  font-weight: 500;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  color: #666;
  font-size: 14px;
  min-width: 80px;
}

.info-item .value {
  color: #333;
  font-size: 14px;
  text-align: right;
  flex: 1;
  margin-left: 16px;
}

.charger-section {
  padding: 16px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.charger-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
}

.charger-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.charger-item {
  text-align: center;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

.charger-type {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.charger-status {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.charger-status .available {
  color: #52c41a;
}

.charger-status .total {
  color: #999;
}

.charger-label {
  font-size: 12px;
  color: #999;
}

/* 单个充电桩状态样式 */
.individual-chargers {
  margin-top: 20px;
}

.individual-chargers h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.charger-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.individual-charger-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
}

.individual-charger-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.1);
}

.charger-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.charger-number {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.connector-type {
  font-size: 12px;
  color: #666;
}

.charger-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.power {
  font-size: 14px;
  color: #1890ff;
  font-weight: 500;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.badge-available {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.badge-busy {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.badge-maintenance {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.badge-offline {
  background: #f5f5f5;
  color: #999;
  border: 1px solid #d9d9d9;
}

.price-section {
  padding: 16px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.price-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
}

.current-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background: #f6ffed;
  border-radius: 6px;
  border: 1px solid #b7eb8f;
}

.current-price .label {
  font-size: 14px;
  color: #333;
}

.current-price .value {
  font-size: 20px;
  font-weight: 600;
  color: #52c41a;
}

.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

.action-section {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: white;
  border-top: 1px solid #e8e8e8;
  display: flex;
  gap: 12px;
}

.nav-btn, .charge-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-btn {
  background: #1890ff;
  color: white;
}

.nav-btn:hover {
  background: #40a9ff;
}

.charge-btn {
  background: #52c41a;
  color: white;
}

.charge-btn:hover:not(:disabled) {
  background: #73d13d;
}

.charge-btn:disabled {
  background: #f5f5f5;
  color: #d9d9d9;
  cursor: not-allowed;
}
</style>